﻿


.hi-note {
    background-position: -74px -24px;
}

.home-icon {
    margin-right: 5px;
    position: relative;
    background-image: url(images/home-icon.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.hi-note {
    background-position: -74px -24px;
}

.note-wrap {
    border-radius: 3px;
    border: 1px solid #cecece;
    box-shadow: 0 3px 4px rgba(0,0,0,0.24),0 1px 2px rgba(0,0,0,0.3);
    position: absolute;
    top: 24px;
    background-color: #fff;
    z-index: 1;
    display: none;
}

    .note-wrap .hi-note-arrow {
        background-position: -96px -23px;
        position: absolute;
        top: -11px;
    }

    .note-wrap .note-inner {
        width: 500px;
        padding: 10px;
        line-height: 18px;
        font-size: 12px;
        text-align: left;
        word-break: normal;
    }

.home-icon:hover .note-wrap {
    display: block;
}




/*渐变色*/
.gradientChange {
    background: #ffc700;
    animation: gradientChange 3s infinite alternate;
}

@keyframes gradientChange {
    100% {
        background: #e91e1e;
    }
}

.bgposition {
    background: linear-gradient(90deg,#e91e1e 50%,#6f27b0 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    animation: bgposition 2s infinite linear alternate;
}

@keyframes bgposition {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.bgSize {
    background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
    background-position: 100% 0;
    animation: bgSize 5s infinite ease-in-out alternate;
}

@keyframes bgSize {
    0% {
        background-size: 300% 100%;
    }

    100% {
        background-size: 100% 100%;
    }
}

